<script setup>
import {panel} from "@/apis/system/v1/analysis.js";

// 判断加载是否完成
const loading = ref(true);
const panelList = ref(4);

// setTimeout(() => {
//   loading.value = false;
// }, 3000);

onMounted(() => {
  panel().then(res => {
    if (res.code === 200) {
      panelList.value = res.result;
      loading.value = false;
    }
  })
});

</script>

<template>
  <div class="jia-grid">
    <a-card :bordered="false" title="销售量" :style="{ width: '408px' }" v-for="(item, index) in panelList"
            :key="index">
      <template #extra>
        <a-skeleton v-if="loading" :animation="true" :loading="loading">
          <a-skeleton-line :rows="1" :widths="[40]" :line-height=30></a-skeleton-line>
        </a-skeleton>
        <a-tag v-else :color="item.color" bordered>{{ item.date }}</a-tag>
      </template>
      <!-- 骨架屏加载 -->
      <a-skeleton v-if="loading" class="jia-skeleton" :animation="true" :loading="loading">
        <a-skeleton-line :rows="1" :widths="[105]" :line-height=40></a-skeleton-line>
        <div class="jia-ratio" style="margin-top: 5px">
          <a-skeleton-line :rows="1" :widths="[105]" :line-height=30></a-skeleton-line>
          <a-skeleton-line :rows="1" :widths="[105]" :line-height=30></a-skeleton-line>
        </div>
        <a-divider/>
        <div class="jia-footer">
          <a-skeleton-line :rows="1" :widths="[105]" :line-height="25"/>
          <a-skeleton-line :rows="1" :widths="[105]" :line-height="25"/>
        </div>
      </a-skeleton>
      <!-- 加载完成 -->
      <div class="jia-skeleton" v-else>
        <a-statistic :value="item.count" :value-from="0" animation show-group-separator
                     :value-style="{ fontSize: '1.875rem' }">
          <template #prefix>
            <span v-if="item % 2 === 0" style="font-size: 25px">￥</span>
          </template>
        </a-statistic>
        <div class="jia-ratio">
          <a-statistic :value="item.day" :animation="true" :value-style="{ fontSize: '13px' }">
            <template #prefix>
              <span style="margin-right: 5px;">日同比</span>
            </template>
            <template #suffix>%
              <icon-caret-up style="color: #0fbf60"/>
            </template>
          </a-statistic>
          <a-statistic :value="item.moon" :animation="true" :value-style="{ fontSize: '13px'  }">
            <template #prefix>
              <span style="margin-right: 5px;">月同比</span>
            </template>
            <template #suffix>%
              <icon-caret-down style="color: #FFDE66"/>
            </template>
          </a-statistic>
        </div>
        <a-divider/>
        <div class="jia-footer">
          <span>{{ item.title }}</span>
          <a-statistic :value="item.total" show-group-separator :value-style="{ fontSize: '13px' }">
            <template #prefix>
              <span v-if="item % 2 === 0" style="font-size: 25px">￥</span>
            </template>
          </a-statistic>
        </div>
      </div>
    </a-card>
  </div>
</template>

<style scoped lang="less">
.jia-grid {
  width: 100%;
  height: 215px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0px, 1fr));
  gap: 8px 12px;
  animation: FadeInRight 2s;

  .jia-skeleton {
    width: 100%;
    height: 80px;

    .jia-ratio {
      height: 30px;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
  }

  .jia-footer {
    height: 25px;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

}
</style>